<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="never" style="margin-top:40px">
            <div class="title" style="text-align: center;font-weight:bolder;margin-top:30px;font-size:28px">
                修改商品信息
            </div>
            <div class="return" style="font-size: 12px;">
                <router-link to="/goods">返回</router-link>
            </div>
            <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm"
                style="margin-top: 50px;">

                <!-- 商品名称 -->
                <el-form-item label="商品名称" prop="name" :rules="[
                        { required: true, message: '商品名称不能为空' },
                    ]" style="margin-left: 100px;">
                    <el-input v-model.text="numberValidateForm.name" autocomplete="off" style="width:390px;"></el-input>
                </el-form-item>

                <!-- 商品图像 -->
                <el-form-item label="商品图像" prop="pic" style="margin-left: 100px;">
                    <input type="file" @change="onFileChange" />
                    <img v-if="previewImage" :src="previewImage" alt="图片预览" style="width: 50px;" />
                    旧<img v-if="numberValidateForm.pic" :src="numberValidateForm.pic" alt="图片预览" style="width: 50px;" />
                </el-form-item>

                <!-- 商品简介 -->
                <el-form-item label="商品简介" prop="desc" :rules="[
                        { required: true, message: '商品简介不能为空' },
                    ]" style="margin-left: 100px;">
                    <el-input v-model.text="numberValidateForm.desc" autocomplete="off" style="width:390px;"></el-input>
                </el-form-item>

                <!-- 商品价格 -->
                <el-form-item label="商品价格" prop="price" :rules="[
                        { required: true, message: '商品价格不能为空' },
                    ]" style="margin-left: 100px;">
                    <el-input v-model.text="numberValidateForm.price" autocomplete="off" style="width:390px;"></el-input>
                </el-form-item>

                <!-- 商品库存 -->
                <el-form-item label="商品库存" prop="stock" :rules="[
                        { required: true, message: '商品库存不能为空' },
                    ]" style="margin-left: 100px;">
                    <el-input v-model.number="numberValidateForm.stock" autocomplete="off" style="width:390px;"></el-input>
                </el-form-item>

                <!-- 商品单位 -->
                <el-form-item label="商品单位" prop="unit" :rules="[
                        { required: true, message: '商品单位不能为空' },
                    ]" style="margin-left: 100px;">
                    <el-input v-model.text="numberValidateForm.unit" autocomplete="off" style="width:390px;"></el-input>
                </el-form-item>

                <!-- 提交商品 -->
                <el-form-item style="margin-left:100px">
                    <el-button type="primary" @click="this.modifyGoods">提交</el-button>
                    <el-button v-if="numberValidateForm.status != 3" @click="updateGoodsStatus">下架商品</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { ModifySupplierGoods, GetSupplierGoodsDetail, UpdateSupplierGoods } from "../../../wailsjs/go/pkg/User"
export default {
    name: "EditGoods",
    data() {
        return {
            numberValidateForm: [], //用来存储商品数据
            previewImage: null, //用来存储图片的base64
        }
    },
    methods: {
        //当用户上传之后图片的base64上传
        onFileChange(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.previewImage = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        },
        modifyGoods() {
            ModifySupplierGoods(localStorage.getItem("supplier_email"), localStorage.getItem("supplier_token"), this.numberValidateForm.name, this.previewImage, this.numberValidateForm.desc, this.numberValidateForm.unit, this.numberValidateForm.price, this.numberValidateForm.number).then((rep) => {
                console.log(rep);
                if (rep.code == 401) {
                    this.$router.push("/login")
                }
            }).catch((rep) => {
                console.log(rep);
            })
        },
        //获取修改前商品信息
        getGoodsInfo() {
            GetSupplierGoodsDetail(localStorage.getItem("supplier_email"), localStorage.getItem("supplier_token"), this.$route.params.id).then((rep) => {
                console.log(rep);
                if (rep.code == 401) {
                    this.$router.push("/login")
                }
                this.numberValidateForm = rep.data
            }).catch((rep) => {
                console.log(rep);
            })
        },
        //修改商品状态
        updateGoodsStatus() {
            UpdateSupplierGoods(localStorage.getItem("supplier_email"), localStorage.getItem("supplier_token"), this.$route.params.id, 3).then((rep) => {
                console.log(rep);
                if (rep.code == 401) {
                    this.$router.push("/login")
                }
            }).catch((rep) => {
                console.log(rep);
            })
        }
    },
    mounted() {
        this.getGoodsInfo()
    },
}
</script>

<style>
.el-form-item__error {
    margin-left: 110px;
}

.app-container {
    margin-top: 40px;
    margin-left: 120px;
    margin-right: 120px;
}

.title {
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 108px;
    height: 108px;
    line-height: 108px;
    text-align: center;
}

.avatar {
    width: 108px;
    height: 108px;
    display: block;
}

.app-container {
    margin-top: 40px;
    margin-left: 120px;
    margin-right: 120px;
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.total-layout {
    margin-top: 40px;
    cursor: pointer;
}

.total-frame {
    border: 1px solid #DCDFE6;
    padding: 20px;
    height: 100px;
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.total-icon {
    color: #409EFF;
    width: 60px;
    height: 60px;
}

.total-title {
    text-align: center;
}

.total-value {
    text-align: center;
}

.un-handle-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
}

.layout-title {
    color: #606266;
    padding: 15px 20px;
    background: #F2F6FC;
    font-weight: bold;
}

.un-handle-content {
    padding: 20px 40px;
}

.un-handle-item {
    border-bottom: 1px solid #EBEEF5;
    padding: 10px;
}

.overview-layout {
    margin-top: 20px;
}

.overview-item-value {
    font-size: 24px;
    text-align: center;
}

.overview-item-title {
    margin-top: 10px;
    text-align: center;
}

.out-border {
    border: 1px solid #DCDFE6;
}

.statistics-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
}

.mine-layout {
    position: absolute;
    right: 140px;
    top: 107px;
    width: 250px;
    height: 235px;
}

.address-content {
    padding: 20px;
    font-size: 18px
}

.pagination-container {
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}
</style>